<template>
<view class="share-fix" @touchmove.stop.prevent>
	<view class="shade" :hidden="!isshare"></view>
	<view class="share-box" :animation="animationData">
		<view class="title">分享至</view>
		<view class="item-box">
			<view class="item">
				<image src="@/static/home/subpage/weChat.png"></image>
				<text>发给朋友</text>
			</view>
			<view class="item">
				<image src="@/static/home/subpage/friends.png"></image>
				<text>分享到朋友圈</text>
			</view>
			<view class="item">
				<image src="@/static/home/subpage/copy.png"></image>
				<text>复制</text>
			</view>
		</view>
		<view class="cancel" @click="closesharefix">取消</view>
	</view>
</view>	
</template>

<script>
	export default {
		name:"share-fix",
		data() {
			return {
				
			};
		},
		props:{
			isshare: {
				type: Boolean,
				default: false
			},
			animationData:{
				type: Object,
				default(){
					return {}
				}
			},
			list: {
				type: Array,
				default(){
					return []
				}
			}
		},
		methods:{
			closesharefix(){
				this.$emit('closesharefix', {
					isshare: false
				})
			},
		}
	}
</script>

<style lang="scss">
/* 分享弹框 */
.share-box{
	position: fixed;
	left:0;bottom:0;
	width:100%;
	box-sizing: border-box;
	transform: translateY(100%);
	z-index: 100;
	padding:32rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0px 0px;
	.title{
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(0,0,0,0.8);
		text-align: center;
	}
	.item-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top:48rpx;
		.item{
			flex:1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			& image{
				width:100rpx;height:100rpx;
			}
			& text{
				margin-top:16rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.8);
			}
		}
	}
	.cancel{
		margin-top:80rpx;
		height: 88rpx;
		background: #F4F5F7;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
		text-align: center;
		line-height: 88rpx;
	}
}
</style>